<template>
	<div>
		<!-- 地址簿选择器 -->
		<el-dialog v-model="addressBookDialog" title="请选择" @closed="cancelAddressBook">
			<template #header>
				<div style="margin-top: 40px">
					<span>请选择</span>
					<div class="dialog-footer" style="float: right">
						<el-button type="primary" @click="toAddAddressBook">新增地址簿</el-button>
						<el-button type="primary" @click="confirmAddressBook">确认</el-button>
					</div>
				</div>
			</template>
			<el-table v-loading="loading" ref="addressBookTableRef" style="width: 100%" :show-header="false" :data="addressBookData" @current-change="handleAddressBookChange" @select="selectAddressBook" highlight-current-row>
				<el-table-column type="selection" width="55" />
				<el-table-column property="date" label="Date">
					<template #default="scope">
						<el-card>
							<el-descriptions
									class="margin-top"
									:column="2"
									border>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											姓名
										</div>
									</template>
									{{scope.row.name}}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											联系电话
										</div>
									</template>
									{{scope.row.phone}}
								</el-descriptions-item>
								<el-descriptions-item :span="2">
									<template #label>
										<div class="cell-item">
											地址
										</div>
									</template>
									{{scope.row.province}}{{scope.row.city}}{{scope.row.town}}{{scope.row.detail}}
								</el-descriptions-item>
							</el-descriptions>
						</el-card>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
						background
						layout="total, prev, pager, next"
						:current-page="query.pageNum"
						:page-size="query.pageSize"
						:page-count="query.page"
						:total="query.total"
						@current-change="handlePageChange"
				></el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import { getAddressBookListApi } from '../api/index';
import { useRouter } from 'vue-router';

// 定义派发事件
const emit = defineEmits(['selectedAddressBook']);
const addressBookDialog = ref(false);
const query = reactive({
	pageNum: 1,
	pageSize: 10,
	page: 1,
	total: 0,
});
const addressBookData = ref([]);
const addressBookTableRef = ref();
const selectedRow = ref();
const loading = ref(false);

// 获取表格数据
const getData = async () => {
	loading.value = true;
	const result = await getAddressBookListApi(query);
	if (result) {
		addressBookData.value = result.data.content;
		query.total = result.data.count;
	}
	loading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

const selectedAddressBook = (param: any) => {
};

// 地址簿单选切换
const handleAddressBookChange = (currentRow: any, unselectedRow: any) => {
	addressBookTableRef.value.toggleRowSelection(currentRow, true);
	addressBookTableRef.value.toggleRowSelection(unselectedRow, false);
	selectedRow.value = currentRow;
};
// 地址簿多选切换
const selectAddressBook = (selection: any, row: any) => {
	if (selection.length > 1) {
		let delRow = selection.shift();
		// 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
		addressBookTableRef.value.toggleRowSelection(delRow, false);
		addressBookTableRef.value.setCurrentRow(row);
		selectedRow.value = row;
	}
};
// 网点确认
const confirmAddressBook = () => {
	if (!selectedRow.value) {
		ElMessage.warning('请选择...');
		return;
	}
	// 调用父组件的selectedAddressBook方法
	emit('selectedAddressBook', selectedRow.value);
	// 清空数据
	cancelAddressBook();
};


// 取消网点选择
const cancelAddressBook = () => {
	addressBookDialog.value = false;
	selectedRow.value = undefined;
	addressBookTableRef.value.clearSelection();
	addressBookTableRef.value.setCurrentRow();
};

// 切换弹出框
const changeShow = async (status: boolean) => {
	console.log("changeShow", status);
	if (status) {
		// 获取数据
		await getData();
	}
	addressBookDialog.value = status;
};

const router = useRouter();
// 前往新增地址簿
const toAddAddressBook = () => {
	router.push("/addressBook");
	addressBookDialog.value = false
};


defineExpose({
	changeShow
})
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.el-form-item {
	font-size: 16px;
	font-weight: 700;
	color: var(--el-text-color-primary);
}

::v-deep(.el-table__header-wrapper .el-checkbox) {
	display:none
}
</style>
